<script setup lang="ts">
import { capsuleButtonHeight, safeAreaInsets } from '@/utils/systemInfo'

defineProps({
  title: { type: String, default: '壁纸' },
})
function goSearch() {
  uni.navigateTo({
    url: '/pages/search/search',
  })
}

onLoad(() => {
  console.log(safeAreaInsets, capsuleButtonHeight)
})
</script>

<template>
  <view class="layout">
    <view class="navbar">
      <view class="statusBar" :style="{ height: `${safeAreaInsets?.top}px` }" />
      <view class="titleBar">
        <view class="title" :style="{ height: `${capsuleButtonHeight}px`, lineHeight: `${capsuleButtonHeight}px` }">
          {{ title }}
        </view>
        <view class="search" @click="goSearch">
          <uni-icons class="icon" type="search" color="#888" size="18" />
          <text class="text">搜索</text>
        </view>
      </view>
    </view>

    <view class="fill" :style="{ height: `${safeAreaInsets.top + capsuleButtonHeight}px` }" />
  </view>
</template>

<style lang="scss" scoped>
.layout {
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background: linear-gradient(180deg, transparent, #fff 80%), linear-gradient(90deg, #52c41a 40%, #fbc118 100%);
    .statusBar {
    }
    .titleBar {
      display: flex;
      align-items: center;
      padding: 0 30rpx;

      .title {
        font-size: 22px;
        font-weight: 700;

        color: #000;
      }
      .search {
        width: 220rpx;
        height: 50rpx;
        border-radius: 60rpx;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid #fff;
        margin-left: 30rpx;
        color: #999;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        .icon {
          margin-left: 5rpx;
        }
        .text {
          padding-left: 10rpx;
        }
      }
    }
  }
  .fill {
  }
}
</style>
